<template>
  <div class="performancePlan-box content-box">
    <nav-title title="绩效计划审批" :routerLink="routerLink"/>
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <div class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.emplid}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.name}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.dept}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.jodDescr}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">考核模板</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.tempName}}</span>
        </div>
      </div>
    </div>
    <div class="regulations-box">
      <div class="title">绩效计划</div>
      <div v-for="item in allInfo.perfors" class="performancePlan-content">
        <div class="my-title"><p>{{item.sectionDesc}} <span>{{item.sectionWeight}}</span></p></div>
        <ul>
          <li v-for="value in item.items" @click="goDetail(value, item.sectionDesc)">
            <div>
              <p>{{value.itemDesc}} <span>{{value.itemWeight}}</span></p>
              <p>{{value.itemOther}}</p>
              <div></div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 流程图 -->
    <div class="regulations-box">
      <div class="title">计划审批人</div>
      <v-flow-charts :type="'performancePlan'" :docid="docid" :version="version" :epPhase="epPhase"></v-flow-charts>
    </div>

    <div class="regulations-box">
      <div class="info-label">审批意见</div>
      <div style="padding:10px;">
        <x-textarea v-model="comments" :disabled="!edit" :max="200" placeholder="请在这里输入审批意见..."/>
      </div>
    </div>

    <div class="btn-box" v-if="edit">
      <button @click="agreeOrNot('APPROVE')">同意</button>
      <button @click="agreeOrNot('PUSHBACK')">驳回</button>
    </div>
  </div>
</template>

<script>
import { XTextarea } from "vux";
import { getPerformancePlan, planApprove } from "../../api/api";
import vFlowCharts from "../formalStaff/common/flowChart";
import qs from "qs";

export default {
  name: "PerformancePlanApproval",
  components: {
    XTextarea,
    vFlowCharts
  },
  created() {
    this.docid = this.$route.query.docid;
    this.version = this.$route.query.version;
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.epPhase = this.$route.query.epPhase;
    this.seqnbr = this.$route.query.seqnbr;
    this.wfType = "EPPL";
    if (this.$route.query.flag == "A030" || this.$route.query.flag == "0030")
      this.edit = false;
    this.getPerformancePlanFunc();
  },
  mounted() {},
  data() {
    return {
      edit: true,
      wfType: "",
      routerLink: "",
      docid: "",
      version: "",
      cTransactionNbr: "",
      epPhase: "",
      allInfo: {},
      comments: ""
    };
  },
  methods: {
    // getData() {
    //   console.debug(this.year);
    // },
    getPerformancePlanFunc() {
      this.$vux.loading.show();
      let params = {
        cTransactionNbr: this.cTransactionNbr,
        docid: this.docid,
        version: this.version,
        wfType: this.wfType,
        seqnbr: this.seqnbr,
        epPhase: this.epPhase
      };
      getPerformancePlan(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
            this.score = res.retData.score;
            this.revisedScore = res.retData.revisedScore;
            this.comments = res.retData.comments;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    agreeOrNot(action) {
      let title = "";
      if (action == "APPROVE") {
        title = "同意";
      } else {
        title = "驳回";
      }
      this.$vux.confirm.show({
        title: "提示",
        content: `您确认要${title}？`,
        onConfirm: () => {
          this.$vux.loading.show();
          const params = {
            cTransactionNbr: this.cTransactionNbr,
            docid: this.docid,
            version: this.version,
            action,
            comments: this.comments,
            seqnbr: this.seqnbr,
            epPhase: this.epPhase
          };
          planApprove(qs.stringify(params))
            .then(res => {
              this.$vux.loading.hide();
              if (res && res.retCode === "000000") {
                // this.$vux.alert.show({
                //   title: "成功",
                //   content: `${title}成功！`,
                //   onHide: () => {
                    this.$router.go(-1);
                //   }
                // });
              } else {
                this.$vux.alert.show({
                  title: "提示",
                  content: res.retMsg
                });
              }
            })
            .catch(res => {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                title: "警告",
                content: "网络异常，请稍后重试"
              });
            });
        }
      });
    },
    goDetail(value, title) {
      this.$router.push({
        name: "PerformancePlanApprovalDetail",
        query: {
          cTransactionNbr: this.cTransactionNbr,
          docid: this.docid,
          version: this.version,
          seqnbr: this.seqnbr,
          epPhase: this.epPhase,
          sectionId: value.sectionId,
          catType: value.catType,
          itemId: value.itemId,
          title
        }
      });
    }
  }
};
</script>

<style type="text/scss" lang="scss">
@import "../../styles/staff.scss";
.performancePlan-box {
  .vux-x-textarea {
    border: 1px solid #ccc;
  }
  .performancePlan-content {
    .my-title {
      padding: 0 20px 0 26px;
      text-align: left;
      position: relative;
      &::before {
        content: " ";
        position: absolute;
        left: 12px;
        top: 7px;
        width: 6px;
        height: 20px;
        background-color: #1caafe;
      }
      p {
        border-bottom: 1px solid #eee;
        line-height: 2.6;
        span {
          float: right;
        }
      }
    }
    ul {
      li {
        padding: 0 20px;
        > div {
          border-bottom: 1px solid #ccc;
          padding: 10px 0;
          position: relative;
          color: #444;
          text-align: left;
          padding-right: 50px;
          color: #555;
          p span {
            float: right;
          }
          > div {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 60px;
            &::after,
            &::before {
              content: " ";
              position: absolute;
              right: -5px;
              width: 20px;
              height: 2px;
              background-color: #ccc;
              border-radius: 5px;
            }
            &::after {
              top: 23px;
              transform: rotate(45deg);
            }
            &::before {
              top: 36px;
              transform: rotate(-45deg);
            }
          }
        }
      }
      li:last-child > div {
        border: none;
      }
    }
  }
  .btn-box {
    padding: 20px;
    margin-bottom: 20px;
    button {
      padding: 10px 30px;
      font-size: 16px;
      border-radius: 5px;
      color: #fff;
      font-weight: bold;
      margin: 0 20px;
      &:first-child {
        background-color: rgba(28, 170, 254, 1);
      }
      &:last-child {
        background-color: rgba(255, 152, 0, 1);
      }
    }
  }
}
</style>
